<template>
    <div class="_23qa_KJTLBPwGdXGWICVcF" style="min-height: 844px;">
        <div style="width: 100%; height: 50px; position: relative; touch-action: none; z-index: 1;">
            <div
                style="height: 100%; background: rgb(255, 255, 255); font-weight: 600; font-size: 17.68px; color: rgb(34, 36, 38);">
                <div class="_2EMaVEYRy1EslD-dh3AINT _35znmbDbko7fIpUGCq5El2" style=" background: rgb(227 87 87);">
                    <a href="http://localhost:5173/#/profile" class="ZxOwDLMiwnQcGAjIpkYgI _2tZLpzZVl_ClneXvNiOANI">
                    </a>
                    <div>
                        <div class="_10IS5CBl842cc7onWGGb0h" style="padding: 18px 0px;">
                            <div class="_32hDoUxxT6lTP167bFknTs">地址列表</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <van-address-list v-model="chosenAddressId" :list="list" :disabled-list="disabledList"
            disabled-text="以下地址超出配送范围" default-tag-text="默认" @add="onAdd" @edit="onEdit" />

        <van-address-edit :area-list="areaList" show-postal show-delete show-set-default show-search-result
            :search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave"
            @delete="onDelete" @change-detail="onChangeDetail" />
    </div>

</template>

<script>
import { createApp } from 'vue';
import { AddressList } from 'vant';
import { areaList } from '@vant/area-data';

const app = createApp();
app.use(AddressList);

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
    setup() {
        const chosenAddressId = ref('1');
        const list = [
            {
                id: '1',
                name: '毕宝鑫',
                tel: '13000000000',
                address: '山东省青岛市市北区卓越世纪中心四号楼五层',
                isDefault: true,
            },
            {
                id: '2',
                name: '伏思展',
                tel: '1310000000',
                address: '山东省青岛市市北区卓越世纪中心四号楼五层',
            },
        ];
        const disabledList = [
            {
                id: '3',
                name: '倪小龙',
                tel: '1320000000',
                address: '山东省烟台市福山区',
            },
        ];

        const onAdd = () => Toast('新增地址');
        const onEdit = (item, index) => Toast('编辑地址:' + index);
        const searchResult = ref([]);

        const onSave = () => Toast('save');
        const onDelete = () => Toast('delete');
        const onChangeDetail = (val) => {
            if (val) {
                searchResult.value = [
                    {
                        name: '黄龙万科中心',
                        address: '杭州市西湖区',
                    },
                ];
            } else {
                searchResult.value = [];
            }
        };
        return {
            list,
            onAdd,
            onEdit,
            disabledList,
            chosenAddressId,
            onSave,
            onDelete,
            areaList,
            searchResult,
            onChangeDetail,
        };

    },

};




</script>

<style lang="scss" scoped>
._2EMaVEYRy1EslD-dh3AINT {
    height: 50px;
    display: flex;
    flex-direction: row;
    position: relative;
    z-index: 5;
}

._2EMaVEYRy1EslD-dh3AINT ._2tZLpzZVl_ClneXvNiOANI {
    background: url() no-repeat;
    background-size: 20% 30%;
    background-position: center;
}

._2EMaVEYRy1EslD-dh3AINT .ZxOwDLMiwnQcGAjIpkYgI {
    width: 40px;
    height: 50px;
    background: url() no-repeat;
    background-size: 2vw 4vw;
    background-position: bottom 3.6vw right 4.26666667vw;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

._2EMaVEYRy1EslD-dh3AINT ._10IS5CBl842cc7onWGGb0h {
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    align-items: center;
}

._35znmbDbko7fIpUGCq5El2 ._10IS5CBl842cc7onWGGb0h {
    max-width: 160px;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-left: 0px !important;
}
</style>